import _Dialog from './Dialog.vue'

export default {
  install(Vue) {
    let dialog = null
    // 全局注册
    Vue.component(_Dialog.name, _Dialog)
    Vue.prototype.$dialog = {
      show,
      hide,
      success,
      info,
      warning,
      danger,
    }

    function success(props, callback) {
      this.show(
        {
          ...props,
          type: 'success',
        },
        callback
      )
    }
    function info(props, callback) {
      this.show(
        {
          ...props,
          type: 'info',
        },
        callback
      )
    }
    function warning(props, callback) {
      this.show(
        {
          ...props,
          type: 'warning',
        },
        callback
      )
    }
    function danger(props, callback) {
      this.show(
        {
          ...props,
          type: 'danger',
        },
        callback
      )
    }

    function show(props, callback) {
      if (!dialog) {
        /* const Dialog = Vue.extend({
          render(h) {
            // 第一个参数也可以是组件名
            return h(_Dialog, {
              props,
            })
          },
        })
        dialog = new Dialog() */

        const Dialog = Vue.extend(_Dialog)
        dialog = new Dialog({
          propsData: props,
        })
        this.vm = dialog.$mount()
        // show 是 $dialog 调用的，所以 this 是 $dialog
        // 目前 $dialog 上有 show、hide、vm
        document.body.appendChild(this.vm.$el)

        callback && callback()
      }
    }
    function hide(callback) {
      document.body.removeChild(this.vm.$el)
      dialog.$destroy()
      dialog = null
      this.vm = null
      callback && callback()
    }
  },
}
